<template>
  <section class="user">
    <aside>
      <ul>
        <li :class="{active:nav==='login'}" @click="changeNav('login')">登录日志</li>
        <li :class="{active:nav==='operation'}" @click="changeNav('operation')">操作日志</li>
      </ul>
    </aside>
    <div class="container">
      <div class="unitBox" v-show="nav==='login'">
        <TableList :list="list" :column="column">
          <div slot="option" class="noBlueBg">
            <el-form :inline="true" :model="options" class="bottom-border" ref="optionForm">
              <el-form-item label="操作账号" prop="username">
                <el-input v-model="options.username" clearable placeholder="请输入账号" size="mini"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" size="mini" @click="loadList"><span class="el-icon el-icon-search"></span> 查询
                </el-button>
                <el-button size="mini" @click="resetOption('optionForm')"><span
                  class="el-icon el-icon-refresh-left"></span> 重置
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="page noBlueBg" slot="bottom">
            <el-pagination
              @size-change="changeSize"
              @current-change="changePage"
              :page-sizes="[20, 50, 100, 200]"
              :current-page="page"
              :page-size="limit"
              layout="sizes,total,prev, pager, next, jumper"
              :total="totals">
            </el-pagination>
          </div>
        </TableList>
      </div>
      <div class="userBox" v-show="nav==='operation'">
        <TableList :list="list" :column="column2">
          <div slot="option" class="noBlueBg">
            <el-form :inline="true" :model="options" class="bottom-border" ref="optionForm">
              <el-form-item label="操作账号" prop="username">
                <el-input v-model="options.username" clearable placeholder="请输入账号" size="mini"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" size="mini" @click="loadList"><span class="el-icon el-icon-search"></span> 查询
                </el-button>
                <el-button size="mini" @click="resetOption('optionForm')"><span
                  class="el-icon el-icon-refresh-left"></span> 重置
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="page noBlueBg" slot="bottom">
            <el-pagination
              @size-change="changeSize"
              @current-change="changePage"
              :page-sizes="[20, 50, 100, 200]"
              :current-page="page"
              :page-size="limit"
              layout="sizes,total,prev, pager, next, jumper"
              :total="totals">
            </el-pagination>
          </div>
        </TableList>
      </div>
    </div>
  </section>
</template>

<script>

  import TableList from 'comp/common/TableList';
  import Dialog from 'comp/common/Dialog.vue';

  export default {
    name: "SystemLog",
    components: {
      Dialog,
      TableList
    },
    data() {
      return {
        nav: 'login',

        unitName: this.$kkui.cache.get('unit'),

        tabHeight: 0,
        options: {

          username: '',
        },
        list: [],
        limit: 20,
        page: 1,
        pages: 1,
        totals: 0,

        column: [
          {
            prop: "title",
            label: "日志标题",
            align: "center",
            showOverflowTooltip: true,
            minWidth: 100,
          },
          {
            prop: "username",
            label: "操作账号",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "loginIp",
            label: "IP地址",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "os",
            label: "操作系统",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "browser",
            label: "浏览器",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "type",
            label: "操作类型",
            align: "center",
            showOverflowTooltip: true,
            minWidth: 80,
            slot: "type",
          },
          {
            prop: "status",
            label: "操作状态",
            align: "center",
            showOverflowTooltip: true,
            minWidth: 100,
            slot: "status",
          },
          {
            prop: "createTime",
            label: "操作时间",
            align: "center",
            showOverflowTooltip: true,
            formatter: (row, column, cellValue) => {
              return this.$util.toDateString(cellValue);
            },
          },
        ],

        column2: [
          {
            prop: "title",
            label: "操作模块",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "logType",
            label: "操作类型",
            align: "center",
            showOverflowTooltip: true,
            slot: "logType",
          },
          {
            prop: "operName",
            label: "操作账号",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "operUrl",
            label: "操作地址",
            align: "center",
            width: 220,
            showOverflowTooltip: true,
          },
          {
            prop: "operIp",
            label: "操作IP",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "operLocation",
            label: "所属城市",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "requestMethod",
            label: "请求方法",
            align: "center",
            showOverflowTooltip: true,
          },
          {
            prop: "status",
            label: "操作状态",
            align: "center",
            showOverflowTooltip: true,
            slot: "status",
          },
          {
            prop: "createTime",
            label: "操作时间",
            sortable: "custom",
            showOverflowTooltip: true,
            formatter: (row, column, cellValue) => {
              return this.$util.toDateString(cellValue);
            },
          }
        ],

      }
    },
    mounted() {
      this.loadList();

    },
    methods: {

      //加载列表
      loadList() {
        this.$server('sysLog',{
          limit: this.limit,
          page: this.page,
          username: this.options.username,
          type:this.nav
        }).then(data => {
          if (this.nav === 'login') {
            this.list = data['records'].map(item => {
                return {
                  ...item,
                  ...{
                    type: [
                      "登录成功",
                      "登录失败",
                      "退出登录",
                      "刷新TOKEN",
                    ][item.type - 1],
                    status: ['操作成功', '操作失败'][item.status]
                  }
                }
              }
            );
          } else {
            this.list = data['records'].map(item => {
                return {
                  ...item,
                  ...{
                    logType: [
                      "其他",
                      "新增",
                      "修改",
                      "删除",
                      "导出数据",
                      "导入模板",
                      "强退",
                      "生成代码",
                      "清空数据",
                      "设置状态",
                    ][item.logType],
                    status: ['操作成功', '操作失败'][item.status]
                  }
                }
              }
            );
          }
          this.totals = data['total'];
          this.$kkui.loading_deepBlue.hide();
        })
      },

      changeNav(nav) {
        this.nav = nav;
        this.options.username = '';
        this.loadList();
      },


      //切换分页
      changePage(page) {

        this.page = page;
        this.loadList();
      },

      changeSize(limit) {
        this.limit = limit;
        this.loadList();
      },

      // 重置option
      resetOption(formName) {
        this.$refs[formName].resetFields();
        this.loadList();
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "~css/system.scss";
</style>
